<template>
 <div class="banner" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div class="wrapper">
      <!-- 图 -->

      <div class="block text-center" style="text-align:center">
        <el-carousel height="500px"
        :activeIndex="currentIndex"
        @change="handleCarouselChange">
          <el-carousel-item v-for="(item,index) in data" :key="item.id">
            <img :src="item.url" alt=""/>
          </el-carousel-item>
        </el-carousel>
      </div>
          <!-- 侧导航 -->
          <div class="subnav">
            <ul>
              <li v-for="(item, index) in navData" :key="index" :data-index="index" @mouseenter="handleEnter">
                <div>
                  <!-- 主分类 -->
                  <span v-for="(subItem, subIndex) in item.main" :key="subIndex">
                    <a :href="subItem.link">{{ subItem.name }}</a>
                  </span>
                  <!-- 子分类 -->
                  <span v-if="item.sub.length">
                    <a v-for="(subItem, subIndex) in item.sub" :key="`sub-${subIndex}`" :href="subItem.link">{{ subItem.name }}</a>
                  </span>
                </div>
                <i class="iconfont icon-arrow-right-bold"></i>
              </li>
            </ul>
          </div>


    </div>
  </div>
</template>

<script setup>
    // banner图
    // 1. 初始数据
    import { ref, onMounted, onUnmounted } from 'vue';

    // 1. 初始数据

    const data = ref([
  { id : 0,url: "https://tse4-mm.cn.bing.net/th/id/OIP-C.Y1U4dfioeg0CiT5P_2c7WQHaEH?w=328&h=182&c=7&r=0&o=5&dpr=2&pid=1.7" },
  { id : 1,url: "https://tse1-mm.cn.bing.net/th/id/OIP-C.q8XPIQHwXQ7-OOcbKq9bnwHaEp?w=288&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" },
  { id : 2,url: "https://tse3-mm.cn.bing.net/th/id/OIP-C.XGrqkEZsvP3O3QBPduufkwHaD2?w=296&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" },
  { id : 3,url: "https://img.zcool.cn/community/018288621df6ae11013f01cdc07da9.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100" }]);


    const navData = ref([
    {
      main: [
        { name: '宋朝官服', link: '链接1' },
        // 更多主分类...
      ],
      sub: [
        { name: '官员服饰', link: '链接1' },
        // 更多子分类...
      ],
    },
    {
      main: [
        { name: '宋朝女装', link: '链接2' },
        // 更多主分类...
      ],
      sub: [
        { name: '女子服装', link: '链接2' },
        // 更多子分类...
      ]
    },
    {
      main: [
        { name: '宋朝常服', link: '链接3' },
        // 更多主分类...
      ],
      sub: [
        { name: '普通常服', link: '链接3' },
        // 更多子分类...
      ]
    },
    {
      main: [
        { name: '宋朝配饰', link: '链接4' },
        // 更多主分类...
      ],
      sub: [
        { name: '服装配饰', link: '链接4' },
        // 更多子分类...
      ]
    }
  ]);
    const currentIndex = ref(0);
    // let currentData = computed(() => data[currentIndex.value]);

    const next = () => {
      currentIndex.value = (currentIndex.value + 1) % data.length;
    };

    const handleEnter = (event) => {
      if (event.target.tagName === 'LI') {
        const index = parseInt(event.target.dataset.index);
        console.log(index)
        currentIndex.value = index; // 更新 currentIndex 的值
        console.log(currentIndex)
        }
    };

// 处理轮播图索引变化
    const handleCarouselChange = (newIndex) => {
      currentIndex.value = newIndex;
    };


    let timerId;
    const startAutoPlay = () => {
      timerId = setInterval(next, 2000);
    };

    const stopAutoPlay = () => {
      clearInterval(timerId);
    };

    onMounted(() => {
      startAutoPlay();
    });

    onUnmounted(() => {
      stopAutoPlay();
    });

    const handleMouseEnter = () => {
      stopAutoPlay();
    };

    const handleMouseLeave = () => {
      startAutoPlay();
    }
</script>

<style scoped>
:deep(.el-carousel__arrow--left) {
  top: 250px;
  left: 260px;
  font-size: 24px;
  font-weight: 900;
  color: orange;
  /* 设置背景图片 */
  /* background: url("../assets/left.jpg") no-repeat center center; */
  background-size: auto 40px;
}
:deep(.el-carousel__arrow--right) {
  top: 250px;
  right: 10px;
  font-size: 24px;
  color: orange;
}
.banner {
  height: 500px;
  background-color: #f5f5f5;
}
.banner :hover {
        .left-btn {
            position: absolute;
            cursor: pointer;
            top: 50%;
            left: 30px;
            width: auto;           
    
        }
        .right-btn {
            position: absolute;
            cursor: pointer;
            top: 50%;
            right: 30px;            
            width: auto;
        }
    }

.banner .wrapper {
  position: relative;
  overflow: hidden;
}
.banner .pic {
  display: flex;
  width: 3720px;
  height: 500px;
}
.banner .pic li {
  width: 1240px;
  height: 500px;
}
.banner .subnav {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.42);
}
.banner .subnav li {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 40px;
  height: 125px;
  line-height: 125px;
}
.banner .subnav a,
.banner .subnav i {
  color: #fff;
}
.banner .subnav li span:nth-child(1) {
  margin-right: 14px;
}
.banner .subnav li span:nth-child(2) a {
  margin-right: 5px;
}
.banner .subnav li span:nth-child(2) a {
  font-size: 14px;
}
.banner .subnav li:hover {
  background-color: #00be9a;
}
.banner ol {
  position: absolute;
  right: 17px;
  bottom: 17px;
  display: flex;
}
.banner ol li {
  cursor: pointer;
  margin-left: 8px;
  padding: 4px;
  width: 22px;
  height: 22px;
  background-color: transparent;
  border-radius: 50%;
}
.banner ol li i {
  display: block;
  width: 14px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.banner ol .current {
  background-color: rgba(255, 255, 255, 0.5);
}
.banner ol .current i {
  background-color: #fff;
}

</style>
